<div id="profile_detail_div">
    <script type="text/javascript" src="/static/src/jquery-1.5.2.js"></script>
    <script type="text/javascript" src="/static/src/csrf_setup.js"></script>   
    <script type="text/javascript" src="/static/src/jquery.loady/jquery.loady.min.js"></script>   
    <link rel="stylesheet" type="text/css" href="/static/src/jquery.loady/jquery.loady.css" />
    <script type="text/javascript">
function load_friendslist()
{
    $("#friendslist").loady({url:"{%url profile.friends.friends_list user_id=current_user.pk %}"});
    return;
}
function load_bookshelflist()
{
    $("#bookshelflist").loady({url:"{%url profile.detail.bookshelf_list user_id=current_user.pk %}"});
    return;
}
    function load_profile(targeturl)
{
    $("#profile_detail_div").loady({url:targeturl});
    return;
}
function remove_user(uid)
{
    $.post("{%url profile.friends.remove_POST %}",
            {
            user_id: uid
            },
            function(data){
            load_friendslist()
            });
}
function add_friend_display()
{
    $("#add_friend_div").slideToggle("fast");
}
$("#profile_detail_div").ready(load_friendslist);
$("#profile_detail_div").ready(load_bookshelflist);
</script>
<h1>{{current_user.user.username}}</h1>
{% if addable %}
<a href="{% url profile.friends.add user_id=current_user.pk %}">Add as friend</a>
{% endif %}

<h2>Friends</h2>
<div id="friendslist" style="min-height:50px; width:200px">
    <noscript>
    {% include "friends_list.html" %}
    </noscript>
</div>
{% if active_profile %}
<a href="{% url profile.friends.add %}" onclick="add_friend_display();return false;">Add friend</a>
<div id="add_friend_div" style="display: none;"></div>
<script>
    $("#add_friend_div").load("{% url profile.friends.add %}");
</script>
{% endif %}

<h2>Personal bookshelf</h2>
<div id="bookshelflist" style="min-height:50px; width:200px;">
    <noscript>
        {% include "bookshelf_list.html" %}
    </noscript>
</div>
</div>
